import React, {Component} from 'react'
import {View, Text, Dimensions, Animated, FlatList, TouchableOpacity} from 'react-native'
import {fetch_chapters} from '../../redux/actions/chapter'
import LoadingCommon from '../common/loading_common'
import StarsCommon from '../common/stars_common'
import LinearGradient from 'react-native-linear-gradient'
import {connect} from 'react-redux'
import NavigatorService from '../../config/navigate_service'
import ParallaxScrollView from 'react-native-parallax-scroll-view'
var {height, width} = Dimensions.get('window')
const windowHeight = width * 0.8

class ChaptersIndex extends Component {
    constructor (props) {
        super(props)
        this.state = {
            scrollY: new Animated.Value(0),
            dataSource: [],
            loading: true,
            name: "",
            cover_url: "",
            learning_count: 0,
            description: ""
        }
    }

    componentWillReceiveProps (nextProps) {
        let chapter = nextProps.chapter
        let {loading, chapters, name, cover_url, learning_count, description} = chapter
        this.setState({
            loading: loading,
            dataSource: chapters,
            name: name,
            cover_url: cover_url,
            learning_count: learning_count,
            description: description
        })
    }

    componentDidMount () {
        this.getData()
    }

    getData = () => {
        this.props.dispatch(fetch_chapters())
    }

    navigationHeader = () => {
        return (
            withNavigation(
                <LinearGradient 
                    style={{height: 50, padding: 10, flexDirection: 'row'}} 
                    colors={['#000000', '#444444', 'rgba(119,136,153, 0.5)', 'rgba(248, 248, 255, 0.2)']}   
                    locations={[0, 0.3, 0.6, 0.8]}                    
                >
                    <Text style={{color: 'white', flex: 1, backgroundColor: 'transparent'}}>排行榜</Text>
                    <View style={{flex: 1, alignItems: 'center'}}>
                        <Text style={{color: 'white', fontSize: 16, fontWeight: 'bold'}}>课程详情</Text>
                    </View>
                    <View style={{flex: 1}} />
            </LinearGradient>
            )
        )
    }

    //动态头部
    animatedHeaderTemplate = () => {
        const {loading, chapters, name, cover_url, learning_count, description, scrollY} = this.state
        
        return(
            <View>
                <Animated.Image
                    style={{
                        position: 'absolute',
                        backgroundColor: '#2e2f31',
                        width: width,
                        resizeMode: 'cover',
                        height: windowHeight,
                        opacity: scrollY.interpolate({
                            inputRange: [-windowHeight, 0, windowHeight / 1.2],
                            outputRange: [1, 1, 0.4],
                            extrapolate: 'clamp'
                        }),
                        transform: [{
                            translateY: scrollY.interpolate({
                                inputRange: [ -windowHeight, 0, windowHeight],
                                outputRange: [windowHeight/2, 0, -50],
                                extrapolate: 'clamp'
                            })
                        },{
                            scale: scrollY.interpolate({
                                inputRange: [ -windowHeight, 0, windowHeight],
                                outputRange: [2, 1, 1]
                            })
                        }]
                    }}
                    source={{uri: cover_url}}
                />
                <LinearGradient 
                    style={{height: 50, padding: 10, flexDirection: 'row'}} 
                    colors={['#000000', '#444444', 'rgba(119,136,153, 0.5)', 'rgba(248, 248, 255, 0.2)']}   
                    locations={[0, 0.3, 0.6, 0.8]}                    
                >
                    <Text style={{color: 'white', flex: 1, backgroundColor: 'transparent', marginTop: 7}}>排行榜</Text>
                    <Text style={{color: 'white', fontSize: 14, fontWeight: 'bold', backgroundColor: 'transparent', marginTop: 7}}>课程详情</Text>
                    <View style={{flex: 1}} />
                </LinearGradient>
                <Animated.View style={{height: width * 0.8 + 50, alignItems: 'flex-start', position: 'absolute', backgroundColor: 'transparent',
                    justifyContent: 'center',
                    left: 0,
                    top: 50,
                    right: 0,
                    bottom: 0,
                    zIndex: 9,
                    width: width,
                    opacity: this.state.scrollY.interpolate({
                        inputRange: [-windowHeight, 0, windowHeight / 1.2],
                        outputRange: [1, 1, 0],
                        extrapolate: 'clamp'
                    }),
                    transform: [{
                        translateY: this.state.scrollY.interpolate({
                            inputRange: [ -windowHeight, 0, windowHeight],
                            outputRange: [windowHeight/2, 0, -50],
                            extrapolate: 'clamp'
                        })
                    }]}}
                >            
                    <View style={{padding: 10}}>
                        <Text style={{color: 'white', fontWeight: 'bold', fontSize: 20}}>{name}</Text>
                        <Text style={{color: 'white', marginTop: 10}}>{description}</Text>
                        <Text style={{color: 'white', marginTop: 30}}>{learning_count}人正在学习</Text>
                    </View>       
                </Animated.View>
            </View> 
        )
    }
    
    _keyExtractor = (item, index) => index
    
    _renderItem = ({item}) => {
        return(
            <TouchableOpacity
                onPress={() => {NavigatorService.navigate('self_learning_show', {id: item.id})}}
                style={{height: 80, backgroundColor: 'white', flexDirection: 'row', borderBottomWidth: 0.3, borderBottomColor: 'gray'}}
            >
                <View style={{padding: 5}}>
                    <Text style={{fontSize: 18}}>{item.name}</Text>
                    <Text style={{color: 'grey'}}>{item.description}</Text>
                </View>
                <View style={{flex: 1, alignItems: 'flex-end', padding: 5}}>
                    <View>
                        <Text>完成进度</Text>
                        <StarsCommon style={{justifyContent: 'flex-end', marginTop: 5}} activeCount={2} />
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    render () {
        const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);   
        const { scrollY } = this.state
        return (
            this.state.loading ? <LoadingCommon /> :
                <View style={{flex: 1}}>
                    {this.animatedHeaderTemplate()}
                    <Animated.View style={{flex: 1, top: width * 0.8 - 50, left:0, right: 0, bottom: 0,height: height,
                        transform: [{
                            translateY: this.state.scrollY.interpolate({
                                inputRange: [ -windowHeight, 0, windowHeight],
                                outputRange: [windowHeight - 50, 0, -windowHeight + 50],
                                extrapolate: 'clamp'
                            }),
                        }],
                        backgroundColor: '#fff',
                        zIndex: 99

                    }}
                    >
                        <AnimatedFlatList
                            style={{flex: 1}}
                            data={this.state.dataSource}
                            keyExtractor={this._keyExtractor}
                            renderItem={this._renderItem}
                            extraData={this.props}
                            onScroll={Animated.event(
                                [{ nativeEvent: { contentOffset: { y: scrollY }}}],
                                { useNativeDriver: true }
                            )}
                        />
                    </Animated.View>
                </View>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        chapter: state.chapter,
        user: state.user
    }
}

export default connect(mapStateToProps)(ChaptersIndex)